body {
  background-color: #000;
  margin: 0
}
.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.mask {
  position: absolute;
  top: 300px;
  padding: 0 20px;
  height: 60px;
  font-size: 20px;
  font-weight: bold;
  line-height: 3;
  color: #fff;
  text-align: center;
}
.mask-1 {
  background-color: #666666cc;
}
.mask-2 {
  background-color: #666666cc;
  filter: blur(4px);
}
.mask-3 {
  background-color: #66666633;
  backdrop-filter: blur(10px);
}
.mask-4 {
  background-color: #66666633;
  backdrop-filter: blur(10px);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3CforeignObject width='100%25' height='100%25'%3E%3Cbody class='wrap' xmlns='http://www.w3.org/1999/xhtml'%3E%3Cstyle%3E.wrap%7Bbox-sizing:border-box;margin:0;height:100%25;padding:15px%7D.shadow%7Bheight:100%25;background:black;border-radius:10px;box-shadow:0 0 5px black, 0 0 10px black, 0 0 15px black %7D%3C/style%3E%3Cdiv class='shadow'/%3E%3C/body%3E%3C/foreignObject%3E%3C/svg%3E");
}


.bottom-img {
  width: 375px;
}
